<script setup>
import { ref } from 'vue'

const props = {
  tabsConfig: {
    id: {
      type: String,
      default: 'tab'
    },
    title: {
      type: String,
      default: 'content'
    }
  },
  change: {
    type: Boolean,
    default: true
  }
}

const [currentTab, setCurrentTab] = ref(0)
const selectedItems = new Set()

// 初始化默认选项卡
const defaultTabConfig = Array.from({ length: 4 }, (_, i) => ({
  id: `tab${i + 1}`,
  title: `Tab ${i + 1}`,
  content: `content${i + 1}`
}))

// 切换到指定的选项卡
function changeToTab(index) {
  if (selectedItems.has(index)) return

  const currentIndex = currentTab
  const nextIndex = index

  // 检查是否需要自动切换
  if (props.change && !selectedItems.has(currentIndex) && currentIndex !== nextIndex) {
    // 跳过已被切换的选项卡
    let i = currentIndex
    while (i < defaultTabConfig.length) {
      if (!selectedItems.has(i)) {
        setCurrentTab(i)
        selectedItems.add(i)
        break
      }
      i++
    }
  } else {
    setCurrentTab(nextIndex)
    selectedItems.add(nextIndex)
  }
}

// 手动切换到指定选项卡
function manualChange(index) {
  if (!selectedItems.has(index)) {
    changeToTab(index)
  }
}
</script>

<template>
  <div class="tabs-container">
    <ul class="tab-list" :key="index">
      <li v-for="(config, index) in defaultTabConfig" :key="index">
        <a
            href="#"
            @click="manualChange(index)"
            :class="{ 'selected-tab': currentTab === index }"
        >
          {{ config.title }}
        </a>
      </li>
    </ul>
  </div>
</template>

<style lang="less" scoped>
.tabs-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

.tab-list {
  list-style: none;
  padding: 0;
}

.tab-item {
  display: inline-block;
  margin: 10px;
  cursor: pointer;
}

.selected-tab {
  color: #007bff;
}
</style>